<template>
  <div class="addOrEdit">
    <el-dialog
      :before-close="handClose"
      center
      width="30%"
      :title="title"
      :visible.sync="off"
      append-to-body
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        size="mini"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="分类名称" prop="catName">
              <el-input v-model.number="ruleForm.catName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="商品详情图" prop="shPosition">
          <el-upload
            ref="upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-error="error"
            class="avatar-uploader"
            accept="image/*"
            action="http://192.168.1.68:18082/user/upload/image"
            list-type="picture-card"
          >
            <div style="height:100%;position:relative">
              <img
                style="z-index:2;position:relative;"
                width="100%"
                height="100%"
                :src="ruleForm.picture"
                alt
              />
                <i class="el-icon-plus" style="z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)"></i>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="rowData.parentId!=0" label="父类选择" prop="parentId">
          <el-cascader
            :show-all-levels="false"
            :clearable="true"
            :props="{children: 'list',label: 'catName',value: 'catId',checkStrictly: true}"
            v-model="ruleForm.parentId"
            :options="options"
            @expand-change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="排序号" prop="sortNumber">
          <el-input-number
            v-model="ruleForm.sortNumber"
            controls-position="right"
            @change="changeSort"
            :min="0"
            :max="10"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="create">立即创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsKindList, addKind, editKind } from "@/api/jxc/goods.js";
export default {
  name: "addOrEditKind",
  props: {
    off: {
      type: Boolean
    },
    rowData: {
      type: Object
    },
    title: {
      type: String
    }
  },
  watch: {
    off(val) {
      if (val) {
        this.$nextTick(() => {
          getGoodsKindList().then(
            res => {
              console.log("商品分类级联res", res);
              this.options = res.data;
              if (this.title == "修改分类") {
                this.ruleForm.catName = this.rowData.catName;
                this.ruleForm.picture = this.rowData.picture;
                this.ruleForm.sortNumber = this.rowData.sortNumber;
                console.log(
                  this.findItemByTypeName(this.options, this.rowData.typeName)
                );
                // this.ruleForm.parentId = this.findItemByParentid(this.options, this.rowData.parentId).shTypeId;
                this.ruleForm.typeName = this.rowData.typeName;
                console.log(this.ruleForm.parentId);
              }
            },
            err => {}
          );
        });
      }
    }
  },
  data() {
    return {
      options: [],
      retainTime: [
        { label: "30分钟", value: "30分钟" },
        { label: "一天", value: "1天" },
        { label: "二天", value: "2天" }
      ],
      rules: {
        notes: [{ required: true, message: "仓位不能为空", trigger: "blur" }],
        shAddress: [
          { required: true, message: "地址不能为空", trigger: "change" }
        ]
      },
      ruleForm: {
        catName: "",
        parentId: "",
        picture: "",
        sortNumber: ""
      }
    };
  },
  methods: {
     error(err, file, fileList) {
      console.log(err, file, fileList);
    },
    handleAvatarSuccess(res, file) {
      console.log("上传成功res", res);
      console.log("上传成功file", file);
      this.ruleForm.picture = res.data;
      this.isImg = true;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },
    findItemByTypeName(arr, typeName) {
      var item = "";
      arr.forEach(e => {
        if (typeName == e.typeName) {
          item = e;
        } else {
          this.findItemByTypeName(e.list, typeName);
        }
      });
      return item;
    },
    changeSort(){},
    handleChange(row) {
      console.log("row", row);
      this.ruleForm.parentId = row[row.length - 1];
    },
    handClose() {
      this.$emit("update:off", false);
      console.log(this.$refs.ruleForm);
      this.ruleForm.imageUrl = "";
      this.$refs.ruleForm.resetFields();
      this.ruleForm.picture = "";
    },
    create() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          return;
        } else {
          if (this.title == "新增分类") {
            addKind(this.ruleForm).then(
              res => {
                console.log("res新增分类成功", res);
                this.$message({
                  type: "success",
                  message: "新增分类成功"
                });
                this.handClose();
                this.$parent.getList();
              },
              err => {}
            );
          } else {
            let obj = this.rowData;
            obj.catName = this.ruleForm.catName;
            obj.picture = this.ruleForm.picture;
            obj.sortNumber = this.ruleForm.sortNumber;
            editKind(obj).then(
              res => {
                console.log("res修改分类成功", res);
                this.$message({
                  type: "success",
                  message: "修改分类成功"
                });
                this.handClose();
                this.$parent.getList();
              },
              err => {
                this.$notify({
                  type: "error",
                  message: err.message
                });
              }
            );
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
/deep/.el-upload--picture-card{
  line-height: 0 !important;
}
</style>